import React, { useState } from 'react';
import { Todo, ToggleTodo } from './types'
import { TodoList } from './TodoList';

const initialTodos: Todo[] = [
  {text: '新房', complete: true},
  {text: '二手房', complete: false},
  {text: '旅行', complete: true},
  {text: '摄影', complete: false},
  {text: '美食', complete: true},
  {text: '阅读', complete: false},
  {text: '音乐', complete: true},
  {text: '闲置转卖', complete: false}
]

const App:React.FC = () => {
  const [todos, setTodos] = useState(initialTodos);
  const toggleTodo: ToggleTodo = selectedTodo => {
      const newTodos = todos.map(todo => {
          if (todo === selectedTodo) { // 被选择的todo更新其状态
              return {
                  ...todo,
                  complete: !todo.complete
              };
          }
          return todo; // 其他todo直接返回
      });
      console.log(newTodos);
      setTodos(newTodos); // 将todos更新为newTodos
  };

  return (
    <div className="App">
      <h1>偏好标签</h1>
      <div>
        <TodoList todos={todos} toggleTodo={toggleTodo}></TodoList>
      </div>
    </div>
  );
}

export default App;
